import { Button, DatePicker, Input, NavBar } from 'antd-mobile'
import Icon from '@/components/Icon'
import './index.scss'
import classNames from 'classnames'
import { billListData } from '@/contants'
import { useNavigate } from 'react-router-dom'
import { useState } from "react";
import { useDispatch } from "react-redux";
import { addBillList } from "@/store/modules/bilStroe.jsx";
import dayjs from "dayjs";

const New = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch();
  // 支持收入切换控制
  const [kaType, setKaType] = useState('pay')
  const switchKaType = (type) => {
    setKaType(type)
  }

  // 金额
  const [money, setMoney] = useState()
  const moneyChange = (value) => {
    setMoney(value)
  }

  // 支出和收入的时间控制
  // 是否显示时间选择器
  const [dateVisible, setDateVisible] = useState(false)
  // 时间
  const [date, setDate] = useState(new Date())
  const dateConfirm = (value) => {
    setDate(value)
    setDateVisible(false)
  }

  // 显示时间控制
  const showDateStyle = () => {
    let curDate = dayjs(date).format('YYYY-MM-DD');
    let sysDate = dayjs(new Date()).format('YYYY-MM-DD');
    return curDate === sysDate ? '今天' : curDate
  }

  // 账单收入或支出的类型
  const [useFor, setUseFor] = useState()

  // 保持账单
  const saveBill = () => {
    const bill = {
      type: kaType,
      money: kaType === 'pat' ? -money : +money,
      date,
      useFor: useFor,
    }

    // 使用Redux 添加
    dispatch(addBillList(bill))
    // 添加完成跳转月度账单
    navigate('/')
  }


  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={ () => navigate(-1) }>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            className={ classNames(kaType === 'pay' ? 'selected' : '') }
            onClick={ () => switchKaType('pay') }
          >
            支出
          </Button>
          <Button
            className={ classNames(kaType === 'income' ? 'selected' : '') }
            shape="rounded"
            onClick={ () => switchKaType('income') }
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date">
              <Icon type="calendar" className="icon"/>
              <span
                className="text"
                onClick={ () => setDateVisible(true) }
              >
                { showDateStyle() }
              </span>

              {/* 时间选择器 */}
              <DatePicker
                className="kaDate"
                title="记账日期"
                visible={ dateVisible }
                onConfirm={ dateConfirm }
                onClose={ () => setDateVisible(false) }
                max={ new Date() }
              />
            </div>
            <div className="kaInput">
              <Input
                className="input"
                placeholder="0.00"
                type="number"
                value={ money }
                onChange={ moneyChange }
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {/* pay 支出列表  income 收入 */ }
        { billListData[kaType].map(item => {
          return (
            <div className="kaType" key={ item.type }>
              <div className="title">{ item.name }</div>
              <div className="list">
                { item.list.map(item => {
                  return (
                    <div
                      className={ classNames(
                        'item',
                        useFor === item.type ? 'selected' : ''
                      ) }
                      key={ item.type }
                      onClick={ () => setUseFor(item.type) }
                    >
                      <div className="icon">
                        <Icon type={ item.type }/>
                      </div>
                      <div className="text">{ item.name }</div>
                    </div>
                  )
                }) }
              </div>
            </div>
          )
        }) }
      </div>

      <div className="btns">
        <Button className="btn save" onClick={ saveBill }>
          保 存
        </Button>
      </div>
    </div>
  )
}

export default New